<template>
  <div class="bms-monitor">
    <!-- BMS状态概览 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="status-card">
          <template #header>
            <div class="card-header">
              <span>{{ $t('deviceDetail.bmsStatus') }}</span>
            </div>
          </template>
          <div class="bms-status">
            <div class="status-indicator" :class="{ normal: bmsNormal }">
              <i class="el-icon-monitor"></i>
            </div>
            <div class="status-info">
              <p class="status-text">{{ bmsNormal ? '正常运行' : '异常状态' }}</p>
              <p class="status-detail">SOC: 75% | SOH: 95%</p>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 电池组数据 -->
      <el-col :span="6">
        <el-card class="battery-data-card">
          <template #header>
            <div class="card-header">
              <span>{{ $t('deviceDetail.batteryData') }}</span>
            </div>
          </template>
          <div class="battery-data">
            <div class="data-row">
              <span class="data-label">{{ $t('deviceDetail.totalVoltage') }}</span>
              <span class="data-value">750.5V</span>
            </div>
            <div class="data-row">
              <span class="data-label">{{ $t('deviceDetail.totalCurrent') }}</span>
              <span class="data-value">-1133A</span>
            </div>
            <div class="data-row">
              <span class="data-label">{{ $t('deviceDetail.soc') }}</span>
              <span class="data-value">75%</span>
            </div>
            <div class="data-row">
              <span class="data-label">{{ $t('deviceDetail.soh') }}</span>
              <span class="data-value">95%</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 温度数据 -->
      <el-col :span="6">
        <el-card class="temp-card">
          <template #header>
            <div class="card-header">
              <span>{{ $t('deviceDetail.temperatureData') }}</span>
            </div>
          </template>
          <div class="temp-data">
            <div class="temp-item">
              <div class="temp-label">{{ $t('deviceDetail.maxTemp') }}</div>
              <div class="temp-value warning">42.5°C</div>
            </div>
            <div class="temp-item">
              <div class="temp-label">{{ $t('deviceDetail.minTemp') }}</div>
              <div class="temp-value normal">25.8°C</div>
            </div>
            <div class="temp-item">
              <div class="temp-label">{{ $t('deviceDetail.avgTemp') }}</div>
              <div class="temp-value normal">34.2°C</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 绝缘检测 -->
      <el-col :span="6">
        <el-card class="insulation-card">
          <template #header>
            <div class="card-header">
              <span>{{ $t('deviceDetail.insulationData') }}</span>
            </div>
          </template>
          <div class="insulation-data">
            <div class="insulation-item">
              <div class="insulation-label">{{ $t('deviceDetail.positiveInsulation') }}</div>
              <div class="insulation-value normal">1.2MΩ</div>
            </div>
            <div class="insulation-item">
              <div class="insulation-label">{{ $t('deviceDetail.negativeInsulation') }}</div>
              <div class="insulation-value normal">1.1MΩ</div>
            </div>
            <div class="insulation-item">
              <div class="insulation-label">{{ $t('deviceDetail.totalInsulation') }}</div>
              <div class="insulation-value normal">0.6MΩ</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 电池模组详情 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card class="module-card">
          <template #header>
            <div class="card-header">
              <span>{{ $t('deviceDetail.batteryModuleDetails') }}</span>
            </div>
          </template>
          <div class="module-container">
            <div v-for="module in batteryModules" :key="module.id" class="module-item"
                 :class="{ warning: module.soc < 20 || module.temp > 40, danger: module.soc < 10 || module.temp > 50 }">
              <div class="module-header">
                <span class="module-name">{{ module.name }}</span>
                <span class="module-status" :class="{ normal: module.status === '正常' }">{{ module.status }}</span>
              </div>
              <div class="module-data">
                <div class="data-item">
                  <span class="item-label">SOC</span>
                  <span class="item-value">{{ module.soc }}%</span>
                </div>
                <div class="data-item">
                  <span class="item-label">电压</span>
                  <span class="item-value">{{ module.voltage }}V</span>
                </div>
                <div class="data-item">
                  <span class="item-label">温度</span>
                  <span class="item-value">{{ module.temp }}°C</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 单体电池数据 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="16">
        <el-card class="cell-card">
          <template #header>
            <div class="card-header">
              <span>{{ $t('deviceDetail.cellVoltageData') }}</span>
              <div class="voltage-stats">
                <span class="stat-item">
                  <span class="stat-label">{{ $t('deviceDetail.maxVoltage') }}:</span>
                  <span class="stat-value">3.65V</span>
                </span>
                <span class="stat-item">
                  <span class="stat-label">{{ $t('deviceDetail.minVoltage') }}:</span>
                  <span class="stat-value">3.42V</span>
                </span>
                <span class="stat-item">
                  <span class="stat-label">{{ $t('deviceDetail.voltageDiff') }}:</span>
                  <span class="stat-value warning">0.23V</span>
                </span>
              </div>
            </div>
          </template>
          <div class="cell-voltage-container">
            <div v-for="(cell, index) in cellVoltageData" :key="index" class="cell-item"
                 :class="{ 
                   warning: cell.voltage > 3.6 || cell.voltage < 3.45,
                   danger: cell.voltage > 3.65 || cell.voltage < 3.4 
                 }">
              <div class="cell-number">{{ cell.number }}</div>
              <div class="cell-voltage">{{ cell.voltage }}V</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- BMS告警信息 -->
      <el-col :span="8">
        <el-card class="bms-alarm-card">
          <template #header>
            <div class="card-header">
              <span>{{ $t('deviceDetail.bmsAlarms') }}</span>
            </div>
          </template>
          <div class="alarm-list">
            <div v-for="alarm in bmsAlarmData" :key="alarm.id" class="alarm-item"
                 :class="{ warning: alarm.level === '重要', danger: alarm.level === '紧急' }">
              <div class="alarm-time">{{ alarm.time }}</div>
              <div class="alarm-content">{{ alarm.content }}</div>              <div class="alarm-level">{{ alarm.level }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const bmsNormal = ref(true)

const batteryModules = ref([
  { id: 1, name: '模组#1', soc: 75, voltage: 48.2, temp: 32.5, status: '正常' },
  { id: 2, name: '模组#2', soc: 74, voltage: 48.1, temp: 33.1, status: '正常' },
  { id: 3, name: '模组#3', soc: 76, voltage: 48.3, temp: 31.8, status: '正常' },
  { id: 4, name: '模组#4', soc: 75, voltage: 48.0, temp: 34.2, status: '正常' },
  { id: 5, name: '模组#5', soc: 18, voltage: 47.8, temp: 42.5, status: '告警' },
  { id: 6, name: '模组#6', soc: 74, voltage: 48.2, temp: 32.9, status: '正常' },
  { id: 7, name: '模组#7', soc: 77, voltage: 48.4, temp: 31.5, status: '正常' },
  { id: 8, name: '模组#8', soc: 75, voltage: 48.1, temp: 33.3, status: '正常' }
])

const cellVoltageData = ref([])

// 生成模拟单体电池数据
for (let i = 1; i <= 96; i++) {
  cellVoltageData.value.push({
    number: i,
    voltage: (3.4 + Math.random() * 0.3).toFixed(2)
  })
}

const bmsAlarmData = ref([
  { id: 1, time: '14:30:25', content: '模组#5温度过高', level: '重要' },
  { id: 2, time: '12:15:10', content: '单体电压差异过大', level: '一般' },
  { id: 3, time: '09:45:33', content: 'SOC低电量告警', level: '一般' },
  { id: 4, time: '08:20:15', content: '绝缘电阻异常', level: '重要' },
  { id: 5, time: '07:10:42', content: '总电压异常', level: '紧急' }
])
</script>

<style scoped>
.bms-monitor {
  height: 100%;
  overflow-y: auto;
}

.status-card, .battery-data-card, .temp-card, .insulation-card, .module-card, .cell-card, .bms-alarm-card {
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
}

.bms-status {
  display: flex;
  align-items: center;
  padding: 20px 0;
}

.status-indicator {
  margin-right: 16px;
  font-size: 48px;
  color: #67c23a;
}

.status-indicator:not(.normal) {
  color: #f56c6c;
}

.status-info .status-text {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 500;
}

.status-info .status-detail {
  margin: 0;
  font-size: 14px;
  color: #909399;
}

.battery-data, .temp-data, .insulation-data {
  padding: 10px 0;
}

.data-row, .temp-item, .insulation-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 8px 0;
}

.data-row:last-child, .temp-item:last-child, .insulation-item:last-child {
  margin-bottom: 0;
}

.data-label, .temp-label, .insulation-label {
  font-size: 14px;
  color: #606266;
}

.data-value {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.temp-value, .insulation-value {
  font-size: 16px;
  font-weight: 500;
}

.temp-value.normal, .insulation-value.normal {
  color: #67c23a;
}

.temp-value.warning, .insulation-value.warning {
  color: #e6a23c;
}

.temp-value.danger, .insulation-value.danger {
  color: #f56c6c;
}

.module-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.module-item {
  padding: 16px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  background: #fff;
}

.module-item.warning {
  border-color: #e6a23c;
  background: #fdf6ec;
}

.module-item.danger {
  border-color: #f56c6c;
  background: #fef0f0;
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.module-name {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.module-status {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  background: #f56c6c;
  color: #fff;
}

.module-status.normal {
  background: #67c23a;
}

.module-data {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.data-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-label {
  font-size: 14px;
  color: #606266;
}

.item-value {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
}

.cell-voltage-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
}

.cell-item {
  padding: 8px 4px;
  text-align: center;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background: #fff;
  font-size: 12px;
}

.cell-item.warning {
  border-color: #e6a23c;
  background: #fdf6ec;
}

.cell-item.danger {
  border-color: #f56c6c;
  background: #fef0f0;
}

.cell-number {
  color: #909399;
  margin-bottom: 4px;
}

.cell-voltage {
  font-weight: 500;
  color: #303133;
}

.voltage-stats {
  display: flex;
  gap: 20px;
  align-items: center;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat-label {
  font-size: 12px;
  color: #909399;
}

.stat-value {
  font-size: 12px;
  font-weight: 500;
  color: #303133;
}

.stat-value.warning {
  color: #e6a23c;
}

.alarm-list {
  max-height: 240px;
  overflow-y: auto;
}

.alarm-item {
  padding: 12px;
  margin-bottom: 8px;
  border-left: 4px solid #909399;
  background: #f8f9fa;
  border-radius: 0 4px 4px 0;
}

.alarm-item.warning {
  border-left-color: #e6a23c;
  background: #fdf6ec;
}

.alarm-item.danger {
  border-left-color: #f56c6c;
  background: #fef0f0;
}

.alarm-time {
  font-size: 12px;
  color: #909399;
  margin-bottom: 4px;
}

.alarm-content {
  font-size: 14px;
  color: #303133;
  margin-bottom: 4px;
}

.alarm-level {
  font-size: 12px;
  font-weight: 500;
  color: #606266;
}
</style>